<template>
	<view>
		<view class="bg-white rounded-20 m-2 pl-2 py-2">
			<view class="rounded-20 bg-light-secondary ml-2 my-2 mr-4 d-flex flex-column j-center a-center unload">
				<view class="d-flex flex-column j-center a-center py-5" v-if="img_list==null" @click="unloadImg">
					<image class="class_camera"  src="../../static/images/goods/icon_gray_camera.png" mode=""></image>
					<view class="">添加图片</view>
				</view>
				<view class="rounded-20 imgPic" v-else v-for="(item,index) in img_list" :key="index">
					<image :src="item" mode="" class="img rounded-20"></image>
				</view>
			</view>
			<view class="font text-light-muted text-center pb-2">顶级分类推荐图片的尺寸为3:1&nbsp;&nbsp;(900x300px)</view>
			<view class="ml-3 border-top py-2">
				<input type="text" value="" placeholder="请输入商品名称" placeholder-class="font-md" @input="change"  />
				<view class="font d-flex j-end mr-2 mt-5">{{num}}/{{count}}</view>
			</view>
		</view>
		<view class="pl-2 bg-white rounded-20 m-2" @click="tabClass">
			<view class="d-flex j-sb pr-2 py-3">
				<view class="">上级分类</view>
				<view class="d-flex j-center a-center">
					<view class="text-light-muted font" >
						<view class="ellipsis-1">
							{{mesg==null?"顶级分类":mesg}}
						</view>
					</view>
					<image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
				</view>
			</view>
		</view>
		<view class="pl-2 bg-white rounded-20 m-2" >
			<view class="d-flex j-sb pr-2 py-3">
				<view class="">关键字</view>
				<view class="d-flex j-center a-center ">
					<input type="text" placeholder="输入关键字" class="text-right class_input" /> 
				</view>
			</view>
		</view>
		<view class="rounded-10 m-2 pl-3 bg-white" >
			<view class="d-flex j-sb pr-2 py-3">
				<view class="">是否显示</view>
				<view class="d-flex j-center a-center">
					<u-switch v-model="checked"></u-switch>
				</view>
			</view>			
		</view>
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				mesg:null,
				count:60,
				num:0,
				img_list:null
			}
		},
		methods: {
			tabClass(){
				uni.navigateTo({
					url:"/pages/goods-class-addshop-board/goods-class-addshop-board"
				})
			},
			// 文本框
			change(e){
				if(e.detail.cursor<60){
					this.num=e.detail.cursor
				}else{
					console.log("输入已超出限制")
				}
			},
			// 上传图片
			unloadImg(){
				uni.chooseImage({
			        count:3,
			        sizeType:["original","compressed"],
			        success:(res)=>{
			            console.log(res);
			            this.img_list = res.tempFilePaths;
			            console.log(this.img_list);
			        }
			    });
			},
		},
		onShow(){
			var globalData = getApp().globalData.closeLists;
			this.mesg=globalData
			console.log(this.mesg)
		}
	}
</script>

<style>
	.class_camera{
		width: 80upx;
		height: 80upx;
	}
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.class_input{ 
		caret-color: #00f;
	}
	.imgPic{
		
	}
	.unload{
		overflow: hidden;
		height: 210upx!important;
	}
	.img{
		height: 220upx!important;
	}
</style>
